import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:ride_rex/coin_shop/coin_shop_page.dart';
import 'package:ride_rex/generated/assets.dart';
import 'package:ride_rex/main/mine/about/about_page.dart';
import 'package:ride_rex/main/mine/article/mine_article_page.dart';
import 'package:ride_rex/main/mine/block_list/mine_block_list_page.dart';
import 'package:ride_rex/main/mine/edit_info/edit_info_page.dart';
import 'package:ride_rex/main/mine/follow_list/mine_follow_list_page.dart';
import 'package:ride_rex/main/mine/landmark/mine_landmark_page.dart';
import 'package:ride_rex/main/mine/setting/setting_page.dart';
import 'package:ride_rex/service/user_service.dart';
import 'package:ylm_ui_kit/ylm_ui_kit.dart';

import '../../route.dart';
import '../../service/log_service.dart';
import '../../standard/app_colors.dart';
import 'mine_logic.dart';

class MinePage extends StatefulWidget {
  const MinePage(this.logic, {Key? key}) : super(key: key);

  final MineLogic logic;

  @override
  State<MinePage> createState() => _MinePageState();
}

class _MinePageState extends State<MinePage> with AutomaticKeepAliveClientMixin {
  @override
  Widget build(BuildContext context) {
    super.build(context);
    return _MinePage(widget.logic);
  }

  @override
  bool get wantKeepAlive => true;
}

class _MinePage extends StatelessWidget {
  const _MinePage(this.logic);

  final MineLogic logic;

  @override
  Widget build(BuildContext context) {
    return BaseScaffold(
      hideBackBtn: true,
      child: Stack(
        children: [
          _buildBg().positioned(
            top: 0,
            left: 0,
            right: 0,
            bottom: -(50.w + ScreenUtil().bottomBarHeight * 0.5),
          ),
          ValueListenableBuilder(
            valueListenable: UserService.instance.notifierOfMineInfo,
            builder: (BuildContext context, MineInfoBean value, Widget? child) {
              return Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Row(
                    children: [
                      _buildBalance(),
                      const Spacer(),
                      _buildEdit(),
                    ],
                  ).padding(left: 18.w, right: 20.w, top: 4.w + ScreenUtil().statusBarHeight),
                  _buildAvatar().padding(left: 46.w, top: 24.w),
                  _buildName().padding(left: 46.w, top: 22.w),
                  _buildId().padding(left: 46.w, top: 18.w),
                  _buildList().padding(top: 22.w),
                ],
              );
            },
          ),
        ],
      ),
    );
  }

  Widget _buildBg() => const IconWidget.image(Assets.pngMyBg, fit: BoxFit.cover);

  Widget _buildBalance() {
    return Stack(
      children: [
        const IconWidget.image(Assets.pngMyBalanceBg).positioned(
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
        ),
        ButtonWidget(
          width: 86.w,
          height: 36.w,
          alignment: Alignment.center,
          onTap: () {
            CommonRoute.open(const CoinShopPage());
            LMLogManager.stat(page: 'purchase');
          },
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              IconWidget.image(Assets.pngMyCoin, width: 27.w, height: 22.w).paddingRight(7.w),
              TextWidget.oneLine(
                text: (UserService.instance.notifierOfMineInfo.value.availableCoins ?? 0).toString(),
                fontSize: 14,
                color: AppColors.text,
                fontWeight: FontWeight.bold,
              ),
            ],
          ),
        ),
      ],
    );
  }

  Widget _buildAvatar() {
    return Stack(
      children: [
        ImageWidget.url(
          UserService.instance.notifierOfMineInfo.value.avatarThumbUrl ?? '',
          width: 88.w,
          height: 88.w,
          radius: 88.w,
          borderWidth: 2.w,
          borderColor: Colors.white,
        ),
        ButtonWidget(
          onTap: logic.changeAvatar,
          hasInkWell: false,
          child: IconWidget.image(Assets.pngMyTakePhoto, size: 26.w),
        ).positioned(bottom: 0, right: 3.w),
      ],
    );
  }

  Widget _buildName() {
    return TextWidget.oneLine(
      text: UserService.instance.notifierOfMineInfo.value.nickname ?? '',
      fontSize: 18,
      color: Colors.white,
      fontWeight: FontWeight.bold,
    );
  }

  Widget _buildList() {
    return Column(
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        _buildItem('My Article', Assets.pngMyActical, () {
          CommonRoute.open(const MineArticlePage());
        }),
        _buildItem('My Landmark', Assets.pngMyBlockList, () {
          CommonRoute.open(const MineLandmarkPage());
        }),
        _buildItem('Follow List', Assets.pngMineFollowList, () {
          CommonRoute.open(const MineFollowListPage());
        }),
        _buildItem('Block List', Assets.pngMyBlockList, () {
          CommonRoute.open(const MineBlockListPage());
        }),
        _buildItem('About', Assets.pngMyAbout, () {
          CommonRoute.open(const AboutPage());
        }),
        _buildItem('Setting', Assets.pngMySetting, () {
          CommonRoute.open(SettingPage());
        }),
      ],
    );
  }

  Widget _buildItem(String title, String icon, VoidCallback onTap) {
    return ButtonWidget(
      onTap: onTap,
      hasInkWell: false,
      height: 60.w,
      child: Row(
        children: [
          IconWidget.image(icon, size: 28.w).paddingLeft(46.w),
          TextWidget.oneLine(text: title, fontSize: 14, color: Colors.white).paddingLeft(8.w),
        ],
      ),
    );
  }

  Widget _buildId() {
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        TextWidget.oneLine(
          text: 'ID：${UserService.instance.notifierOfMineInfo.value.userId ?? ''}',
          fontSize: 12,
          color: Colors.black.withOpacity(0.5),
        ),
        ButtonWidget.text(
          'copy',
          textColor: AppColors.primary,
          fontSize: 10,
          backgroundColor: Colors.white,
          alignment: Alignment.center,
          width: 35.w,
          height: 15.w,
          borderRadius: 8.w,
          onTap: () => CommonOperate.copy(
            UserService.instance.notifierOfMineInfo.value.userId ?? '',
            toast: 'Copy success',
          ),
        ).paddingLeft(4.w),
      ],
    );
  }

  Widget _buildEdit() {
    return ButtonWidget(
      onTap: () => CommonRoute.open(const EditInfoPage()),
      hasInkWell: false,
      child: IconWidget.image(Assets.pngMyEdit, size: 34.w),
    );
  }
}
